<template>
  <div>
    <vue-ueditor-wrap
    ref="ueditor"
      v-model="contents"
      :config="myConfig"
      style="width: 100%"
    ></vue-ueditor-wrap>
  </div>
</template>

<script>
export default {
  name: "myUeditor",
  props: {
    content: "",
  },
  data() {
    return {
      contents: this.content,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 400, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: process.env.VUE_APP_UEDITOR_HOME_URL,
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: `/upload/upload_file`,
      },
    };
  },
  watch: {
    content(newContent) {
      console.log(this.$refs.ueditor);
      this.contents = newContent;
      
      // const wordCount = newContent.trim().length
      // if (wordCount > this.maxWordCount) {
      //   // 如果超出最大字数，截取内容至最大字数并提示
      //   this.contents = newContent.substring(0, this.maxWordCount)
      //   this.$message.error(`字数已达到限制，您输入的内容已被截断至${this.maxWordCount}字。`)
      // }else {
      // }
    },
  },
};
</script>

<style scoped></style>
